<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  <style type="text/css">
  .navbar-brand {
    font-size: 1.5em;
  }

  #topContainer {
    background-image: url("day-dream-1600.jpg");
    width: 100%;
    background-size: cover;
  }

  #topRow {
    margin-top: 100px;
  }

  #topRow h1 {
    font-size: 300%;
  }

  .bold {
    font-weight: bold;
  }

  .marginTop {
    margin-top: 30px;
  }

  .center {
    text-align: center;
  }

  .title {
    margin-top: 100px;
    font-size: 30px;
  }

  #footer {
    background-color: rgb(84,137,253);
    width: 100%;
    padding-top: 70px;
  }

  .appstoreImage {
    width: 250px;
  }
  </style>
</head>

<body>

  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse-1">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">MyApp</div>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#download">Download</a></li>
          <li><a href="#about">About</a></li>
        </ul>

        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="email" placeholder="Email" class="form-control"></input>
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control"></input>
          </div>
          <button type="submit" class="btn btn-success">Log in</button>
        </form>
      </div>
    </div>
  </div>

  <div class="container contentContainer" id="topContainer">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 center" id="topRow">
        <h1 class="marginTop">My awesome app</h1>

        <p class="lead">
          This is why you should download this fantastic app.
        </p>

        <p>
          Some more information about the app.
        </p>

        <p class="bold">
          Interested? Join our mailing list!
        </p>

        <form class="form">
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="email" placeholder="Email" class="form-control"></input>
          </div>
          <input type="submit" value="Submit" class="btn btn-success btn-lg marginTop"></input>          
        </form>
      </div>
    </div>
  </div>

  <div class="container contentContainer">
    <div class="row">
      <h1 class="center title">This is why it is awesome!</h1>
      <p class="lead center">
        Summary of the app's awaresomeness
      </p>
    </div>

    <div class="row">
      <div class="col-md-4 marginTop">
        <h2><span class="glyphicon glyphicon-star"></span>Header</h2>
        <p>Known more about rock stars.</p>
        <button class="btn btn-success marginTop">Read</button>
      </div>
      <div class="col-md-4 marginTop">
        <h2><span class="glyphicon glyphicon-music"></span>Header</h2>
        <p>Listen to rock music.</p>
        <button class="btn btn-success marginTop">Listen</button>
      </div>
      <div class="col-md-4 marginTop">
        <h2><span class="glyphicon glyphicon-pencil"></span>Header</h2>
        <p>Discussion with other fans.</p>
        <button class="btn btn-success marginTop">Talk</button>
      </div>
    </div>
  </div>

  <div class="container contentContainer" id="footer">
    <div class="row">
      <h1 class="center title">Download the App!</h1>
      <p class="lead center">Really, why should I download it</p>
      <p class="center">
        <a href="">
          <img src="app_store_icon.png" class="appstoreImage">
        </a>
      </p>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <script type="text/javascript">
    var winWidth=$(window).height();
    $(".contentContainer").css("height", winWidth);
  </script>
</body>

</html>
